<script setup>
import More2Fill from "@iconify-icons/ri/more-2-line";
import del from "@iconify-icons/ri/delete-bin-line";
import copy from "@iconify-icons/ep/copy-document";
import edit from "@iconify-icons/ri/edit-line";
import Folder from "@/assets/svg/folder.svg";
defineOptions({
  name: "folderCard"
});

const props = defineProps({
  folderList: {
    type: Object
  }
});
const emit = defineEmits([
  "handleClickRename",
  "handleClickOption",
  "handleClickDelete",
  "handleClickItem"
]);
const handleClickRename = (row, type) => {
  row.type = type;
  emit("handleClickRename", row);
};
const handleClickOption = row => {
  emit("handleClickOption", row);
};

const handleClickDelete = row => {
  emit("handleClickDelete", row);
};
const handleClickItem = row => {
  emit("handleClickItem", row);
};
</script>

<template>
  <div class="folder-content">
    <div v-for="(folder, index) in folderList" :key="index" class="folder-item">
      <div class="folder" @click="handleClickItem(folder)">
        <Folder class="icons" />
        <div class="title">
          <label class="title-str">{{ folder.name }}</label>
        </div>
      </div>
      <div class="prop">
        <el-dropdown trigger="click">
          <IconifyIconOffline :icon="More2Fill" class="icons" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleClickRename(folder, 'dir')">
                <IconifyIconOffline :icon="edit" class="icon" />
                重命名
              </el-dropdown-item>
              <el-dropdown-item @click="handleClickOption(folder)">
                <IconifyIconOffline :icon="copy" class="icon" />
                复制或移动
              </el-dropdown-item>
              <el-dropdown-item @click="handleClickDelete(folder)">
                <template #default>
                  <IconifyIconOffline :icon="del" class="icon" />
                  删除
                </template>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.folder-item {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: inline-block;
  width: calc(12.5% - 16px);
  max-width: 200px;
  height: 40px;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 16%);
  transition: transform 0.4s;

  .folder {
    .icons {
      position: absolute;
      top: 50%;
      left: 10px;
      width: 20px;
      height: 20px;
      font-size: 18px;
      transform: translateY(-50%);
    }

    .title {
      display: flex;
      height: 20px;
      max-height: 32px;
      margin-top: 9px;
      margin-bottom: 4px;
      margin-left: 35px;
      overflow: hidden;
      font-size: 13px;
      line-height: 20px;
      color: #212930;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;

      .title-str {
        display: inline-block;
        max-width: calc(100% - 15px);
        margin-right: 5px;
        overflow: hidden;
        font-weight: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }

  .prop {
    position: absolute;
    top: 8px;
    right: 0;
    z-index: 100;

    .icons {
      font-size: 0;
    }
  }
}

.icon {
  margin: 5px 10px;
  font-size: 20px;
}

.folder-item:hover {
  z-index: 2;
  border: 1px solid #067bef !important;
  opacity: 1;
  transform: translateY(-2px);

  .icons {
    font-size: 22px;
  }
}
</style>
